<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花龙腾航 - 账户管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
        }

        .logo-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .user-avatar {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }
        .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            min-width: 200px;
            z-index: 10;
        }

        .dropdown-menu.open {
            display: block;
        }

        .dropdown-item {
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .dropdown-item:hover {
            background-color: #f3f4f6;
        }

        .security-level-bar {
            height: 8px;
            border-radius: 4px;
            background-color: #e5e7eb;
        }
        
        .security-level-progress {
            height: 100%;
            border-radius: 4px;
            background-color: #10b981;
            transition: width 0.5s ease;
        }
        
        .device-card {
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }
        
        .device-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border-left-color: #4f46e5;
        }
        
        .tab-active {
            border-bottom: 3px solid #4f46e5;
            color: #4f46e5;
            font-weight: 600;
        }
        
        .input-highlight:focus {
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- Navigation -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fas fa-plane text-3xl text-blue-500"></i>
            <h1 class="text-2xl font-bold logo-text">花龙腾航</h1>
        </div>
        <nav class="hidden md:flex space-x-6">
            <a href="user_index" class="text-gray-600 hover:text-blue-500">首页</a>
            <a href="user_flight_search" class="text-gray-600 hover:text-blue-500">航班查询</a>
            <a href="user_order" class="text-gray-600 hover:text-blue-500">我的订单</a>
            <a href="user_ticket" class="text-gray-600 hover:text-blue-500">我的机票</a>
            <a href="user_member_center" class="text-gray-600 hover:text-blue-500">会员中心</a>
        </nav>
        <div class="flex items-center space-x-4">
            <div class="flex items-center space-x-2 cursor-pointer group relative" id="user-menu">
                <div class="w-8 h-8 rounded-full user-avatar overflow-hidden">
                    <img th:if="${imageExists}" th:src="'static/images/'+${user.getU_id()}+'.jpg?version=' + ${#dates.createNow().time}" alt="用户头像" class="w-full h-full object-cover">
                    <img th:if="${!imageExists} and ${user.getSex()} == '女'" src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-full h-full object-cover">
                    <img th:if="${!imageExists} and ${user.getSex()} == '男'" src="https://randomuser.me/api/portraits/men/71.jpg" alt="用户头像" class="w-full h-full object-cover">
                </div>
                <span class="hidden md:inline text-gray-700 group-hover:text-blue-500" th:text="${user.getU_name()}">张先生</span>
                <div class="dropdown-menu" id="dropdown-menu">
                    <div class="dropdown-item" onclick="location.href='user_profile'">
                        <i class="fas fa-user-cog mr-2"></i> 个人主页
                    </div>
                    <div class="dropdown-item" onclick="location.href='#'">
                        <i class="fas fa-cog mr-2"></i> 账号管理
                    </div>
                    <div class="border-t border-gray-200 my-1"></div>
                    <div class="dropdown-item text-red-500" onclick="location.href='user_logout'">
                        <i class="fas fa-sign-out-alt mr-2"></i> 退出登录
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

    <!-- 主要内容 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="flex flex-col md:flex-row gap-8">
            <!-- 侧边栏 -->
            <div class="w-full md:w-64 flex-shrink-0">
                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="p-6 bg-indigo-600 text-white text-center">
                        <div class="relative mx-auto w-24 h-24 rounded-full overflow-hidden border-4 border-white mb-4">
                            <img th:if="${imageExists}" th:src="'static/images/'+${user.getU_id()}+'.jpg?version=' + ${#dates.createNow().time}" alt="用户头像" class="w-full h-full object-cover">
                            <img th:if="${!imageExists} and ${user.getSex()} == '女'" src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-full h-full object-cover">
                            <img th:if="${!imageExists} and ${user.getSex()} == '男'" src="https://randomuser.me/api/portraits/men/71.jpg" alt="用户头像" class="w-full h-full object-cover">
                        </div>
                        <h3 class="text-lg font-semibold" th:text="${user.getU_name()}">张美丽</h3>
                        <p class="text-indigo-200 text-sm" th:text="${user.getGrade()}">金牌会员</p>
                    </div>
                    <nav class="space-y-1">
                        <a href="user_profile" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition">
                            <i class="fas fa-user mr-3 text-gray-500"></i> 个人资料
                        </a>
                        <a href="user_order" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition">
                            <i class="fas fa-ticket mr-3 text-gray-400"></i> 我的订单
                        </a>
                        <a href="user_ticket" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition">
                            <i class="fas fa-ticket mr-3 text-gray-400"></i> 我的机票
                        </a>
                        <a href="user_member_center" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition">
                            <i class="fas fa-crown mr-3 text-gray-400"></i> 会员权益
                        </a>
                        <a href="#" class="block px-4 py-2 rounded-lg bg-blue-50 text-blue-600 font-medium transition">
                            <i class="fas fa-cog mr-3 text-blue-400"></i> 账户设置
                        </a>
                    </nav>
                </div>

                <div class="mt-6 bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="p-4 border-b">
                        <h4 class="text-sm font-medium text-gray-700">
                            <i class="fas fa-shield-alt mr-2 text-indigo-500"></i> 安全状态
                        </h4>
                    </div>
                    <div class="p-4">
                        <div class="mb-3">
                            <div class="flex justify-between text-sm text-gray-600 mb-1">
                                <span>安全等级</span>
                                <span th:if="${email} != 'null'">高</span>
                                <span th:if="${email} == 'null'">中</span>
                            </div>
                            <div class="security-level-bar">
                                <div th:if="${email} == 'null'" class="security-level-progress" style="width: 85%"></div>
                                <div th:if="${email} != 'null'" class="security-level-progress" style="width: 100%"></div>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2 text-sm"></i>
                                <span class="text-xs text-gray-600">密码强度高</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2 text-sm"></i>
                                <span class="text-xs text-gray-600">已绑定手机</span>
                            </div>
                            <div th:if="${email} == 'null'" class="flex items-center">
                                <i class="fas fa-times-circle text-red-500 mr-2 text-sm"></i>
                                <span class="text-xs text-gray-600">未绑定邮箱</span>
                            </div>
                            <div th:if="${email} != 'null'" class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2 text-sm"></i>
                                <span class="text-xs text-gray-600">已绑定邮箱</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2 text-sm"></i>
                                <span class="text-xs text-gray-600">已实名认证</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="flex-1">
                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="border-b border-gray-200">
                        <nav class="flex -mb-px">
                            <button id="security-tab" class="tab-active py-4 px-6 text-center border-b-2 font-medium text-sm">
                                <i class="fas fa-lock mr-2"></i>账户安全
                            </button>
                            <button id="password-tab" class="py-4 px-6 text-center border-b-2 font-medium text-sm text-gray-500 hover:text-gray-700">
                                <i class="fas fa-key mr-2"></i>注销账号
                            </button>
                        </nav>
                    </div>

                    <!-- 账户安全内容 -->
                    <div id="security-content" class="p-6">
                        <h2 class="text-lg font-semibold text-gray-800 mb-6">账户安全设置</h2>
                        <p th:if="${current_password_wrong}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">修改密码时输入的原密码有误！请重新输入</p>
                        <p th:if="${password_wrong}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">修改密码时输入的两次新密码不一致！请重新输入</p>
                        <p th:if="${password_same}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">修改密码时输入的新密码与原密码一致！请重新输入</p>
                        <p th:if="${update_failure}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">密码修改失败！</p>
                        <p th:if="${update_success}" style="color: green; font-size: 0.9em; margin-top: 0.5em;">密码修改成功！</p>
                        <p th:if="${unsubscribe_failure}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">注销账号失败！</p>
                        <p th:if="${password_error}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">注销账号时密码输入错误，请重新输入！</p>
                        <div class="space-y-6">
                            <!-- 密码设置 -->
                            <div class="flex flex-col md:flex-row md:items-center justify-between p-4 bg-gray-50 rounded-lg">
                                <div class="mb-3 md:mb-0">
                                    <h3 class="text-sm font-medium text-gray-700">登录密码</h3>
                                    <p class="text-xs text-gray-500 mt-1">定期修改密码可以提高账户安全性</p>
                                </div>
                                <button onclick="showPasswordModal()" class="px-4 py-2 bg-white border border-gray-300 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    修改密码
                                </button>
                            </div>

                            <!-- 邮箱绑定 -->
                            <div class="flex flex-col md:flex-row md:items-center justify-between p-4 bg-gray-50 rounded-lg">
                                <div class="mb-3 md:mb-0">
                                    <h3 class="text-sm font-medium text-gray-700">绑定邮箱</h3>
                                    <p th:if="${email} == 'null'" class="text-xs text-gray-500 mt-1">未绑定邮箱</p>
                                    <p th:if="${email} != 'null'" class="text-xs text-gray-500 mt-1" th:text="'已绑定邮箱：'+${user.getEmail()}">未绑定邮箱</p>
                                </div>
                                <button onclick="showEmailModal()" class="px-4 py-2 bg-white border border-gray-300 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    绑定邮箱
                                </button>
                            </div>

                            <!-- 手机绑定 -->
                            <div class="flex flex-col md:flex-row md:items-center justify-between p-4 bg-gray-50 rounded-lg">
                                <div class="mb-3 md:mb-0">
                                    <h3 class="text-sm font-medium text-gray-700">绑定手机</h3>
                                    <p class="text-xs text-gray-500 mt-1" th:text="'已绑定手机：'+${user.getU_phone()}">已绑定手机：138****5678</p>
                                </div>
                                <!--button onclick="showPhoneModal()" class="px-4 py-2 bg-white border border-gray-300 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    更换手机
                                </button-->
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    已绑定
                                </span>
                            </div>
                            
                            <!-- 实名认证 -->
                            <div class="flex flex-col md:flex-row md:items-center justify-between p-4 bg-gray-50 rounded-lg">
                                <div class="mb-3 md:mb-0">
                                    <h3 class="text-sm font-medium text-gray-700">实名认证</h3>
                                    <p class="text-xs text-gray-500 mt-1" th:text="'已实名认证：'+${user.getU_name()}">已实名认证：张美丽</p>
                                </div>
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    已认证
                                </span>
                            </div>
                            
                            <!-- 安全提示 -->
                            <div class="mt-8 p-4 bg-blue-50 rounded-lg">
                                <h3 class="text-sm font-medium text-blue-800 flex items-center">
                                    <i class="fas fa-info-circle mr-2"></i> 安全提示
                                </h3>
                                <ul class="mt-2 text-xs text-blue-700 space-y-1">
                                    <li>• 请勿向他人泄露您的账户密码和验证码</li>
                                    <li>• 建议定期修改密码，并使用字母、数字和符号组合</li>
                                    <li>• 如发现异常登录，请立即修改密码并联系客服</li>
                                    <li>• 绑定邮箱可以增加账户安全性并接收重要通知</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- 注销账号内容 (默认隐藏) -->
                    <div id="password-content" class="p-6 hidden">
                        <h2 class="text-lg font-semibold text-gray-800 mb-6">注销账号</h2>
                        <form class="space-y-6 max-w-md" method="post" action="user_unsubscribe">
                            <div>
                                <label for="current-password" class="block text-sm font-medium text-gray-700">当前密码</label>
                                <div class="mt-1 relative">
                                    <input type="hidden" th:value="${user.getU_account()}" name="del_account">
                                    <input id="current-password" name="current_password" type="password" autocomplete="current-password" required class="input-highlight block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                                    <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700" onclick="togglePasswordVisibility('current-password')">
                                        <i class="far fa-eye"></i>
                                    </button>
                                </div>
                            </div>

                            <div class="pt-2">
                                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                                    确认注销
                                </button>
                            </div>
                            <div class="mt-8 p-4 bg-red-50 rounded-lg">
                                <h3 class="text-sm font-medium text-red-800 flex items-center">
                                    <i class="fas fa-info-circle mr-2"></i> 安全提示
                                </h3>
                                <ul class="mt-2 text-xs text-red-700 space-y-1">
                                    <li>• 此操作将永久删除您的账号，且无法恢复</li>
                                    <li>• 若有未完成的订单，删除您的账号后将会自动取消订单</li>
                                </ul>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改密码模态框 -->
    <div id="password-modal" class="fixed z-10 inset-0 overflow-y-auto hidden">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-key text-indigo-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">修改密码</h3>
                            <div class="mt-2">
                                <form class="space-y-4" method="post" action="user_account_manage">
                                    <div>
                                        <label for="modal-current-password" class="block text-sm font-medium text-gray-700">当前密码</label>
                                        <div class="mt-1 relative">
                                            <input name="current_password" id="modal-current-password" type="password" class="input-highlight block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                                            <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700" onclick="togglePasswordVisibility('modal-current-password')">
                                                <i class="far fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div>
                                        <label for="modal-new-password" class="block text-sm font-medium text-gray-700">新密码</label>
                                        <div class="mt-1 relative">
                                            <input name="new_password" id="modal-new-password" type="password" class="input-highlight block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                                            <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700" onclick="togglePasswordVisibility('modal-new-password')">
                                                <i class="far fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div>
                                        <label for="modal-confirm-password" class="block text-sm font-medium text-gray-700">确认新密码</label>
                                        <div class="mt-1 relative">
                                            <input name="confirm_password" id="modal-confirm-password" type="password" class="input-highlight block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                                            <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-500 hover:text-gray-700" onclick="togglePasswordVisibility('modal-confirm-password')">
                                                <i class="far fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="text-sm text-gray-500">
                                        <span class="font-medium">提示：</span>请输入当前密码，并输入新密码两次，以确认修改。
                                    </div>
                                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                                        <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
                                            确认修改
                                        </button>
                                        <button type="button" onclick="hideModal('password-modal')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                                            取消
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 更换手机模态框 -->
    <div id="phone-modal" class="fixed z-10 inset-0 overflow-y-auto hidden">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-mobile-alt text-indigo-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">更换手机号码</h3>
                            <div class="mt-2">
                                <form class="space-y-4">
                                    <div>
                                        <label for="current-phone" class="block text-sm font-medium text-gray-700">当前手机号码</label>
                                        <div class="mt-1">
                                            <input type="text" id="current-phone" value="138****5678" disabled class="bg-gray-100 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm">
                                        </div>
                                    </div>
                                    <div>
                                        <label for="new-phone" class="block text-sm font-medium text-gray-700">新手机号码</label>
                                        <div class="mt-1">
                                            <input type="tel" id="new-phone" class="input-highlight block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="请输入新手机号码">
                                        </div>
                                    </div>
                                    <div>
                                        <label for="phone-verify-code" class="block text-sm font-medium text-gray-700">验证码</label>
                                        <div class="mt-1 flex rounded-md shadow-sm">
                                            <input type="text" id="phone-verify-code" class="input-highlight flex-1 block w-full rounded-none rounded-l-md border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2 border" placeholder="请输入验证码">
                                            <button  id="get-phone-code-btn" type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                                获取验证码
                                            </button>
                                        </div>
                                    </div>
                                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                                        <button id="submit-bind-phone-btn" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
                                            确认更换
                                        </button>
                                        <button type="button" onclick="hideModal('phone-modal')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                                            取消
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 绑定邮箱模态框 -->
    <div id="email-modal" class="fixed z-10 inset-0 overflow-y-auto hidden">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-envelope text-indigo-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">绑定邮箱</h3>
                            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                                <form class="space-y-4">
                                    <!-- 邮箱地址输入 -->
                                    <div>
                                        <label for="new-email" class="block text-sm font-medium text-gray-700">邮箱地址</label>
                                        <input type="email" id="new-email" class="input-highlight block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="请输入邮箱地址">
                                    </div>

                                    <!-- 验证码输入 -->
                                    <div>
                                        <label for="email-verify-code" class="block text-sm font-medium text-gray-700">验证码</label>
                                        <div class="mt-1 flex rounded-md shadow-sm">
                                            <input type="text" id="email-verify-code" class="input-highlight flex-1 block w-full rounded-none rounded-l-md border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 px-3 py-2 border" placeholder="请输入验证码">
                                            <button type="button" id="get-email-code-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                                获取验证码
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button" id="submit-bind-email-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
                        确认绑定
                    </button>
                    <button type="button" onclick="hideModal('email-modal')" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white pt-12 pb-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4 flex items-center">
                        <i class="fas fa-plane mr-2 text-blue-400"></i>
                        <span class="logo-text">花龙腾航</span>
                    </h3>
                    <p class="text-gray-400 mb-4">为您提供安全、舒适、便捷的航空旅行服务。</p>
                    <div class="flex space-x-4">
                        <a href="https://weixin.com" class="text-gray-400 hover:text-white"><i class="fab fa-weixin"></i></a>
                        <a href="https://weibo.com" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
                        <a href="https://qq.com" class="text-gray-400 hover:text-white"><i class="fab fa-qq"></i></a>
                        <a href="https://douyin.com" class="text-gray-400 hover:text-white"><i class="fab fa-tiktok"></i></a>
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-4">关于我们</h3>
                    <ul class="space-y-2">
                        <li><a href="public_company_profile" class="text-gray-400 hover:text-white">公司简介</a></li>
                        <li><a href="public_company_profile" class="text-gray-400 hover:text-white">企业文化</a></li>
                        <li><a href="public_company_profile" class="text-gray-400 hover:text-white">发展历程</a></li>
                        <li><a href="public_job_posting" class="text-gray-400 hover:text-white">招贤纳士</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-4">帮助中心</h3>
                    <ul class="space-y-2">
                        <li><a href="public_faq" class="text-gray-400 hover:text-white">常见问题</a></li>
                        <li><a href="public_baggage_regulations" class="text-gray-400 hover:text-white">行李规定</a></li>
                        <li><a href="public_company_profile" class="text-gray-400 hover:text-white">公司简介</a></li>
                        <li><a href="public_callus" class="text-gray-400 hover:text-white">联系我们</a></li>

                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-4">联系方式</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-center"><i class="fas fa-phone-alt mr-2"></i> 客服热线: 19976338635</li>
                        <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> ganshenghao888@qq.com</li>
                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> 广东省广州市天河区华南农业大学</li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-800 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2025 花龙腾航 版权所有</p>
                <div class="flex space-x-6">
                    <a href="public_privacy_policy" class="text-gray-400 hover:text-white text-sm">隐私政策</a>
                    <a href="public_user_agreement" class="text-gray-400 hover:text-white text-sm">使用条款</a>
                    <a href="public_cookie" class="text-gray-400 hover:text-white text-sm">Cookie政策</a>
                </div>
            </div>
        </div>
    </footer>

    <div class="fixed bottom-8 right-8 z-50">
    <button onclick="toggleChat()" class="bg-blue-500 text-white p-4 rounded-full shadow-lg hover:bg-blue-600">
        <i class="fas fa-comment-dots text-2xl"></i>
    </button>

    <div id="chat-window" class="hidden fixed bottom-24 right-8 w-96 bg-white rounded-lg shadow-xl">
        <div class="bg-blue-500 text-white p-4 rounded-t-lg flex justify-between">
            <h3 class="font-bold">智能客服</h3>
            <button onclick="toggleChat()" class="hover:text-blue-200">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="h-96 p-4 overflow-y-auto" id="chat-messages">
            <div class="text-gray-500 text-sm">您好！请问需要什么帮助？</div>
        </div>
        <form id="chat-form" onsubmit="sendMessage(this, event)" class="border-t p-4">
            <div class="flex gap-2">
                <label>
                    <input type="text" id="message-input" name="message"
                           class="flex-1 border rounded-lg p-2"
                           placeholder="输入问题..."
                           required
                           maxlength="200">
                </label>
                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </form>
    </div>
</div>

    <script>
        // 切换标签页
        document.getElementById('security-tab').addEventListener('click', function() {
            switchTab('security');
        });
        
        document.getElementById('password-tab').addEventListener('click', function() {
            switchTab('password');
        });
        
        function switchTab(tabName) {
            // 重置所有标签状态
            document.getElementById('security-tab').classList.remove('tab-active');
            document.getElementById('password-tab').classList.remove('tab-active');

            
            document.getElementById('security-tab').classList.add('text-gray-500', 'hover:text-gray-700');
            document.getElementById('password-tab').classList.add('text-gray-500', 'hover:text-gray-700');

            
            // 隐藏所有内容
            document.getElementById('security-content').classList.add('hidden');
            document.getElementById('password-content').classList.add('hidden');

            
            // 激活当前标签
            document.getElementById(tabName + '-tab').classList.add('tab-active');
            document.getElementById(tabName + '-tab').classList.remove('text-gray-500', 'hover:text-gray-700');
            
            // 显示当前内容
            document.getElementById(tabName + '-content').classList.remove('hidden');
        }
        
        // 显示模态框
        function showPasswordModal() {
            document.getElementById('password-modal').classList.remove('hidden');
        }
        
        function showPhoneModal() {
            document.getElementById('phone-modal').classList.remove('hidden');
        }
        
        function showEmailModal() {
            document.getElementById('email-modal').classList.remove('hidden');
        }
        
        // 隐藏模态框
        function hideModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
        }
        
        // 切换密码可见性
        function togglePasswordVisibility(inputId) {
            const input = document.getElementById(inputId);
            const icon = input.nextElementSibling.querySelector('i');
            
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }
        
        // 移除设备
        function removeDevice(button) {
            const deviceCard = button.closest('.device-card');
            if (confirm('确定要移除此设备吗？')) {
                deviceCard.style.opacity = '0';
                setTimeout(() => {
                    deviceCard.remove();
                }, 300);
            }
        }
        
        // 初始化显示安全标签页
        switchTab('security');

        // 获取验证码按钮
        document.getElementById('get-email-code-btn').addEventListener('click', function () {
            const emailInput = document.getElementById('new-email');
            const email = emailInput.value.trim();

            if (!email || !/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(email)) {
                alert("请输入有效的邮箱地址");
                return;
            }

            fetch(`/TicketOrder/sendEmail?email=${encodeURIComponent(email)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        startCountdown(this);
                        alert("验证码已发送，请查收邮件");
                    } else {
                        alert("验证码发送失败：" + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert("网络异常，请稍后再试");
                });
        });

        // 确认绑定按钮
        document.getElementById('submit-bind-email-btn').addEventListener('click', function () {
            const codeInput = document.getElementById('email-verify-code');
            const code = codeInput.value.trim();

            if (!code) {
                alert("请输入验证码");
                return;
            }

            fetch('/TicketOrder/verifyEmail', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `code=${encodeURIComponent(code)}`
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const email = document.getElementById('new-email').value;
                        return fetch('/TicketOrder/bindEmail', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body: `email=${encodeURIComponent(email)}`
                        });
                    } else {
                        throw new Error("验证码错误，请重新输入");
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert("邮箱绑定成功！");
                        location.reload();
                    } else {
                        alert("绑定失败：" + (data.message || "未知错误"));
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    alert("操作失败：" + error.message);
                });
        });

        // 倒计时函数
        function startCountdown(button) {
            let count = 60;
            button.disabled = true;
            button.textContent = `重新发送(${count})`;

            const interval = setInterval(() => {
                count--;
                if (count > 0) {
                    button.textContent = `重新发送(${count})`;
                } else {
                    clearInterval(interval);
                    button.disabled = false;
                    button.textContent = "获取验证码";
                }
            }, 1000);
        }

        document.getElementById('get-phone-code-btn').addEventListener('click', function () {
            const phoneInput = document.getElementById('new-phone');
            const phone = phoneInput.value.trim();

            if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                alert("请输入有效的手机号");
                return;
            }

            fetch(`/TicketOrder/sendPhoneCode?phone=${encodeURIComponent(phone)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        startCountdown(this);
                        alert("验证码已发送，请注意查收");
                    } else {
                        alert("验证码发送失败：" + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert("网络异常，请稍后再试");
                });
        });
        document.getElementById('submit-bind-phone-btn').addEventListener('click', function () {
            const codeInput = document.getElementById('phone-verify-code');
            const code = codeInput.value.trim();

            if (!code) {
                alert("请输入验证码");
                return;
            }

            fetch('/TicketOrder/verifyPhone', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `code=${encodeURIComponent(code)}`
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const phone = document.getElementById('new-phone').value;
                        return fetch('/TicketOrder/bindPhone', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body: `phone=${encodeURIComponent(phone)}`
                        });
                    } else {
                        throw new Error("验证码错误，请重新输入");
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert("手机号绑定成功！");
                        location.reload();
                    } else {
                        alert("绑定失败：" + (data.message || "未知错误"));
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    alert("操作失败：" + error.message);
                });
        });
        function startCountdown(button) {
            let count = 60;
            button.disabled = true;
            button.textContent = `重新发送(${count})`;

            const interval = setInterval(() => {
                count--;
                if (count > 0) {
                    button.textContent = `重新发送(${count})`;
                } else {
                    clearInterval(interval);
                    button.disabled = false;
                    button.textContent = "获取验证码";
                }
            }, 1000);
        }

    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 用户菜单功能
            const userMenu = document.getElementById('user-menu');
            const dropdownMenu = document.getElementById('dropdown-menu');

            userMenu.addEventListener('click', (event) => {
                event.stopPropagation();
                dropdownMenu.classList.toggle('open');
            });

            document.addEventListener('click', (event) => {
                const isClickInside = userMenu.contains(event.target) || dropdownMenu.contains(event.target);
                if (!isClickInside) {
                    dropdownMenu.classList.remove('open');
                }
            });

            // 聊天功能
            const chatWindow = document.getElementById('chat-window');
            const chatForm = document.getElementById('chat-form');
            let isSending = false;

            window.toggleChat = function() {
                chatWindow.classList.toggle('hidden');
                if (!chatWindow.classList.contains('hidden')) {
                    document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
                }
            };

            window.sendMessage = async function(form, event) {
                event.preventDefault();

                if (isSending) return false;
                isSending = true;

                const input = document.getElementById('message-input');
                const message = input.value.trim();

                console.log('发送的消息:', message);

                if (!message) {
                    alert("请输入有效内容");
                    isSending = false;
                    return false;
                }

                try {
                    addMessage('user', message);
                    input.value = '';
                    const loader = addMessage('assistant', '<div class="dot-pulse"></div>');

                    const contextPath = window.location.pathname.split('/')[1];
                    const response = await fetch(`/${contextPath}/ChatServlet`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                        },
                        body: `message=${encodeURIComponent(message)}`
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP错误! 状态码: ${response.status}`);
                    }

                    const data = await response.text();
                    loader.remove();
                    addMessage('assistant', data);
                } catch (error) {
                    console.error('请求失败:', error);
                    addMessage('assistant', `服务暂时不可用（${error.message}）`);
                    alert(`请求失败: ${error.message}`);
                } finally {
                    isSending = false;
                }
                return false;
            };

            function addMessage(role, content) {
                console.log("添加消息 - 角色:", role, "内容:", content);
                const container = document.getElementById('chat-messages');
                const div = document.createElement('div');
                div.className = `mb-4 flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;

                const contentDiv = document.createElement('div');
                contentDiv.className = role === 'user'
                    ? 'bg-blue-500 text-white rounded-lg p-3 max-w-[80%]'
                    : 'bg-gray-100 text-gray-800 rounded-lg p-3 max-w-[80%]';

                contentDiv.innerHTML = content;
                div.appendChild(contentDiv);
                container.appendChild(div);

                container.scrollTo({
                    top: container.scrollHeight,
                    behavior: 'smooth'
                });

                return div;
            };

            document.getElementById('message-input').addEventListener('keypress', (e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    chatForm.requestSubmit();
                }
            });
        });
    </script>
</body>
</html>